<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--&lt;!&ndash;获得更好的响应式支持&ndash;&gt;-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>登陆页面</title>
    <!--引入bootstrap核心css样式-->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!--引入jquery的js文件-->
    <script src="./jquery/jquery.min.js"></script>
    <!--引入bootstrap的jquery文件-->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <!--引用vue.js-->
    <script src="./vue/vue.min.js"></script>
    <!--引用axios-->
    <script src="./axios/axios.min.js"></script>
</head>
<body>

    <!--bootstrap的container容器-->
    <div class="container-fluid" id="login">
        <div class="row">
            <!--标题-->
            <div class="col-sm-3 col-sm-offset-5">
                <h1>用户登录123123------</h1>
            </div>

            <!--这里为显示和个人中心退出的功能， 个人中心为下拉菜单-->
            <div class="col-sm-2 col-sm-offset-2">
                <div class="dropdown" v-show="islogging">
                    欢迎您 <strong style="font-size: 20px;color: #ff8000;">{{ loggingUser }}</strong>
                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" >
                        个人中心
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" >
                        <li ><a href="#">用户信息</a></li>
                        <li><a href="#">我的新消息</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="javascript:;" @click="logout">退出登陆</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--登陆表单-->
        <form class="form-horizontal" style="margin-top: 150px">
            <div class="form-group">
                <label class="col-sm-2 col-sm-offset-2 control-label">用户名:</label>
                <div class="col-sm-4">
                    <input type="text" v-model="user.username" class="form-control" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 col-sm-offset-2 control-label">密码:</label>
                <div class="col-sm-4">
                    <input type="text" v-model="user.password" class="form-control" placeholder="请输入密码">
                </div>
            </div>

            <div class="col-sm-offset-4 col-sm-2">
                <button class="btn btn-info btn-sm" type="button" @click="login">
                    <span class="glyphicon glyphicon-log-in"></span> 登陆
                </button>
            </div>

            <!--注册按钮，直接跳转至注册界面-->
            <div class="col-sm-6">
                <button class="btn btn btn-warning btn-sm" type="button" onclick="location.href='register.html' ">
                    <span class="glyphicon glyphicon glyphicon-user"></span> 没有账号？注册一个
                </button>
            </div>
        </form><!--登陆表单-->
    </div>

</body>
</html>

<script>

    var app = new Vue({
        el: "#login",
        data: {
            //这是用户的json对象
            user: {},
            //登陆状态 boolean
            islogging: false,
            //登陆中的用户
            loggingUser: ""
        },
        methods: {
            //登陆的方法
            login() {
                axios.post(location.origin+"/vue_springboot_emp/user/login", {
                    username: this.user.username,
                    password: this.user.password
                }).then(
                    function (res) {
                        console.log(res);
                        //状态码为100则登陆成功
                        if(res.data.status==100) {
                        //登陆成功，将用户名存入localStorage
                            localStorage.setItem("user", res.data.loginUser.username);
                            //刷新页面 为了使v-show的内容显示出来
                            location.reload();
                            alert(res.data.message);
                        //    跳转页面到员工列表
                            location.href="empList.html";
                        }else {
                            alert(res.data.message);
                        }
//
                    }
                )
            },
            //退出登陆
            logout() {
                localStorage.removeItem("user");
                location.reload();
                alert("已经退出登陆");
                //退出登陆时应该返回登陆页面
                location.href="login.html";
            }
        },
        //进入页面就执行的方法：查看localStorage中是否有登陆的用户
        //如果存在就在页面右上角显示
        created() {
            var loginUser = localStorage.getItem("user");
            if (loginUser!=null) {
                //用户在线，把登陆状态设置为true
                this.islogging = true;
                // alert(localStorage.getItem("user")+"在线中");
                this.loggingUser = loginUser;
            }
        }

    })

</script>















